@import "../../style/public";

.disabled {
    background-color: #999 !important;
}

.notice {
    background: #fdfcec;
    @include remCalc(font-size, 20);
    @include remCalc(height, 60);
    @include remCalc(line-height, 60);
    @include remCalc(padding, 0, 30);
    color: #f87c36;
    display: inline-flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;

    i {
        @include remCalc(font-size, 32);
        @include remCalc(padding-right, 12);
    }
}

.btn {
    width: 100%;
    @include remCalc(font-size, 36);
    @include remCalc(height, 88);
    @include remCalc(line-height, 88);
    background: linear-gradient(271.44deg, #F52222 0%, #D81212 100%);
    margin-top: pw(39);
     margin-bottom: pw(40);
    color: #fff;
    text-align: center;
}

.cell {
    width: pw(355);
    height: pw(230);
    margin-top: pw(10);
    margin-left: pw(10);
    border-radius: pw(10);
    // @include remCalc(padding, 30);
    @include remCalc(margin-bottom, 20);
    background-color: #fff;

    &-title {
        @include remCalc(font-size, 32);
        color: #333;
        font-family: PingFang SC;
        font-size: pw(16);
        font-weight: 400;
        line-height: pw(22);
        letter-spacing: 0px;
        text-align: left;
        padding-top: pw(10);
        margin-left: pw(10);

    }

    &-subtitle {
        margin-top: pw(4);
        margin-left: pw(10);

        color: rgba(153, 153, 153, 1);

        font-family: PingFang SC;
        font-size: pw(12);
        font-weight: 400;
        line-height: pw(16);
        letter-spacing: 0px;
        text-align: left;

    }

    &-textarea {

        background: #F8F8F8;
        border: 1px solid #E8E8E8;
        box-sizing: border-box;

        @include remCalc(font-size, 26);
        @include remCalc(border-radius, 8);
  
        width: pw(335);
        height: pw(148);
        margin-top: pw(15);
        margin-left: pw(10);
        border-radius: 8px
    }

    &-ul {
        overflow: hidden;
        @include remCalc(width, 708);
        @include remCalc(margin-left, -20);

        >li {
            @include remCalc(width, 216);
            @include remCalc(height, 136);
            @include remCalc(margin, 20, 0, 20, 20);
            float: left;
            box-sizing: border-box;
            background: #F9F9F9;
            // border: 1px solid #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            img {
                @include remCalc(max-width, 216);
                @include remCalc(max-height, 136);
            }

            .zhk-sbylx {
                position: absolute;
                color: #999;
                @include remCalc(top, 3);
                @include remCalc(right, 3);
            }
        }
    }

    &-field {
        @include remCalc(margin, 0, -30, -30, -30);
    }
}

.cells {
    width: pw(355);
    height: pw(152);
    margin-top: pw(10);
    margin-left: pw(10);
    border-radius: pw(10);
    // @include remCalc(padding, 30);
    @include remCalc(margin-bottom, 20);
    background-color: #fff;
    // li{
    //     width: pw(66);
    //     height: pw(66);
    //     margin-left: pw(20);
    // }
    // img{
    //     width: pw(60);
    //     height: pw(60)

    // }
    // .zhk-sbylx {
    //     position: absolute;
      
    //     width: pw(14)!important;
    //     height: pw(14)!important;
    //     top: pw(-15)!important;
    //     right: pw(-15)!important;
    // }
    &-title {
        @include remCalc(font-size, 32);
        color: #333;
        font-family: PingFang SC;
        font-size: pw(16);
        font-weight: 400;
        line-height: pw(22);
        letter-spacing: 0px;
        text-align: left;
        padding-top: pw(10);
        margin-left: pw(10);

    }

    &-subtitle {
        margin-top: pw(4);
        margin-left: pw(10);

        color: rgba(153, 153, 153, 1);

        font-family: PingFang SC;
        font-size: pw(12);
        font-weight: 400;
        line-height: pw(16);
        letter-spacing: 0px;
        text-align: left;

    }

    &-textarea {

        background: #F8F8F8;
        border: 1px solid #E8E8E8;
        box-sizing: border-box;

        @include remCalc(font-size, 26);
        @include remCalc(border-radius, 8);
  
        width: pw(335);
        height: pw(148);
        margin-top: pw(15);
        margin-left: pw(10);
        border-radius: 8px
    }

    &-ul {
        overflow: hidden;
        @include remCalc(width, 708);
        // @include remCalc(margin-left, 20);
       
        >li {
            width: pw(66);
            height: pw(66);
           
            @include remCalc(margin,20, 0, 20, 20);
            float: left;
            box-sizing: border-box;
            background: #F9F9F9;
            // border: 1px solid #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            img {
                width: pw(60);
                height: pw(60);
                @include remCalc(max-width, 216);
                @include remCalc(max-height, 136);
            }

            .zhk-sbylx {
              
                font-size: pw(14);
                position: absolute;
                color: #999;
                @include remCalc(top,-11);
                @include remCalc(right, -11);
            }
        }
    
    }

    &-field {
        @include remCalc(margin, 0, -30, -30, -30);
    }
}
.cellr {
    width: pw(355);
    height: pw(137);
    margin-top: pw(10);
    margin-left: pw(10);
    border-radius: pw(10);
    // @include remCalc(padding, 30);
    @include remCalc(margin-bottom, 20);
    background-color: #fff;
    .input-clear-wrap input{
        background: rgba(248, 248, 248, 1);
    }
    &-title {
        @include remCalc(font-size, 32);
        color: #333;
        font-family: PingFang SC;
        font-size: pw(16);
        font-weight: 400;
        line-height: pw(22);
        letter-spacing: 0px;
        text-align: left;
        padding-top: pw(15);
        margin-left: pw(10);

    }
    .cell-field{
        width: pw(335);
        height: pw(50);
        background: rgba(248, 248, 248, 1);
        margin-left: pw(10);
        border-radius: pw(8);
        margin-top: pw(15);
    }

    &-subtitle {
        margin-top: pw(4);
        margin-left: pw(10);

        color: rgba(153, 153, 153, 1);

        font-family: PingFang SC;
        font-size: pw(12);
        font-weight: 400;
        line-height: pw(16);
        letter-spacing: 0px;
        text-align: left;

    }

    &-textarea {

        background: #F8F8F8;
        border: 1px solid #E8E8E8;
        box-sizing: border-box;

        @include remCalc(font-size, 26);
        @include remCalc(border-radius, 8);
  
        width: pw(335);
        height: pw(148);
        margin-top: pw(15);
        margin-left: pw(10);
        border-radius: 8px
    }

    &-ul {
        overflow: hidden;
        @include remCalc(width, 708);
        @include remCalc(margin-left, -20);

        >li {
            @include remCalc(width, 216);
            @include remCalc(height, 136);
            @include remCalc(margin, 20, 0, 20, 20);
            float: left;
            box-sizing: border-box;
            background: #F9F9F9;
            // border: 1px solid #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            img {
                @include remCalc(max-width, 216);
                @include remCalc(max-height, 136);
            }

            .zhk-sbylx {
                position: absolute;
                color: #999;
                @include remCalc(top, 3);
                @include remCalc(right, 3);
            }
        }
    }

    &-field {
        @include remCalc(margin, 0, -30, -30, -30);
    }
}
.cell-textarea::placeholder {
    width: pw(305);
    padding-left: pw(10);
    padding-top: 10px;
    font-family: PingFang SC;
    font-size: pw(12);
    font-weight: 400;
    line-height: pw(16);
    letter-spacing: 0px;
    text-align: left;


}
